<template>
  <section id="products" class="section-padding" :style="{
    background: `linear-gradient(135deg, ${primaryColor}20 0%, ${secondaryColor}20 100%)`,
    '--primary-color': primaryColor,
    '--secondary-color': secondaryColor,
    '--accent-color': accentColor
  }">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 - 使用固定中文 -->
      <div class="text-center max-w-3xl mx-auto mb-16">
        <span class="text-primary font-medium">产品中心</span>
        <h2 class="section-title">我们的核心产品</h2>
        <p class="section-subtitle">自主研发的系列产品，为企业提供全方位的数字化支持</p>
      </div>

      <!-- 加载状态 -->
      <div v-if="isLoading" class="flex flex-col items-center justify-center py-20">
        <div class="w-16 h-16 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
        <p class="mt-4 text-gray-600">正在加载产品数据...</p>
      </div>

      <!-- 产品展示 -->
      <div v-else :class="gridClass">
        <!-- 显示产品列表 -->
        <div v-for="(product, index) in filteredProducts" :key="index"
          class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition-all duration-300"
          @click="handleProductClick(product)" :style="cardStyle">
          <div class="h-48 overflow-hidden">
            <img :src="product.image" :alt="product.name"
              class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
          </div>
          <div class="p-6">
            <span class="inline-block px-3 py-1 rounded-full mb-3 text-xs font-medium"
              :class="getProductTagClass(product.tag)">
              {{ getProductTagLabel(product.tag) }}
            </span>
            <h3 class="text-xl font-bold mb-2">{{ product.name }}</h3>
            <p class="text-dark/70 mb-4">{{ product.description }}</p>
            <div class="flex flex-wrap gap-2 mb-6">
              <span v-for="(feature, fIndex) in product.features" :key="fIndex"
                class="px-2 py-1 bg-gray-100 text-dark/60 text-xs rounded">
                {{ feature }}
              </span>
            </div>
            <a href="#" class="text-primary font-medium inline-flex items-center hover:underline"
              @click.stop="handleDetailClick(product, $event)">
              查看详情
              <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>

        <!-- 空状态显示 -->
        <div v-if="filteredProducts.length === 0"
          class="col-span-full flex flex-col items-center justify-center py-20 text-center">
          <i class="fa fa-cubes text-6xl text-gray-300 mb-4"></i>
          <h3 class="text-xl font-semibold text-gray-700 mb-2">暂无产品数据</h3>
          <p class="text-gray-500 max-w-md">
            {{ currentActiveTag ? '该标签下暂无产品' : '当前没有可展示的产品' }}
          </p>
          <button v-if="dataSourceUrl" @click="refresh"
            class="mt-6 px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all">
            刷新数据
          </button>
        </div>
      </div>

      <!-- 产品特性 -->
      <div class="mt-20" v-if="showAdvantages">
        <h3 class="text-2xl font-bold text-center mb-12">我们的产品优势</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div v-for="(advantage, index) in advantages" :key="index"
            class="bg-white p-6 rounded-xl text-center hover:shadow-lg transition-all duration-300"
            :style="{ borderRadius: `${cardRadius}px` }">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i :class="['fa', advantage.icon, 'text-2xl text-primary']"></i>
            </div>
            <h4 class="font-bold mb-2">{{ advantage.title }}</h4>
            <p class="text-sm text-dark/70">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ProductCenter',
  // 低代码平台元数据 - 移除语言相关配置
  lowcode: {
    meta: {
      name: 'product-center',
      displayName: '产品中心',
      description: '展示公司核心产品和产品优势的组件',
      icon: 'fa-cubes',
      category: '内容展示',
      version: '1.0.0',
      isContainer: false
    },

    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'secondaryColor',
            label: '辅助色',
            type: 'color',
            defaultValue: '#36CFC9'
          },
          {
            name: 'accentColor',
            label: '强调色',
            type: 'color',
            defaultValue: '#722ED1'
          },
          {
            name: 'dataSourceUrl',
            label: '数据源URL',
            type: 'text',
            defaultValue: '',
            description: 'API接口地址，用于动态加载产品数据'
          },
          {
            name: 'autoLoad',
            label: '自动加载数据',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '布局配置',
        fields: [
          {
            name: 'columnLayout',
            label: '列布局',
            type: 'select',
            options: [
              { label: '1列', value: '1' },
              { label: '2列', value: '2' },
              { label: '3列', value: '3' },
              { label: '自动适应', value: 'auto' }
            ],
            defaultValue: 'auto'
          },
          {
            name: 'cardRadius',
            label: '卡片圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'cardShadow',
            label: '卡片阴影',
            type: 'switch',
            defaultValue: true
          },
          {
            name: 'showAdvantages',
            label: '显示产品优势',
            type: 'boolean',
            defaultValue: true
          }
        ]
      }
    ],

    events: [
      {
        name: 'productClick',
        label: '产品卡片点击',
        description: '点击产品卡片时触发',
        parameters: [
          { name: 'product', type: 'object', description: '产品信息对象' }
        ]
      },
      {
        name: 'detailClick',
        label: '查看详情点击',
        description: '点击查看详情链接时触发',
        parameters: [
          { name: 'product', type: 'object', description: '产品信息对象' }
        ]
      },
      {
        name: 'dataLoaded',
        label: '数据加载完成',
        description: '从数据源加载数据完成时触发',
        parameters: [
          { name: 'data', type: 'array', description: '加载的产品数据' }
        ]
      },
      {
        name: 'dataLoadError',
        label: '数据加载失败',
        description: '从数据源加载数据失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' }
        ]
      }
    ],

    actions: [
      {
        name: 'filterByTag',
        label: '按标签筛选',
        description: '按产品标签筛选产品',
        parameters: [
          { name: 'tag', type: 'string', required: false, description: '标签值，为空传值显示全部' }
        ]
      },
      {
        name: 'refresh',
        label: '刷新产品',
        description: '重新加载产品数据'
      }
    ]
  },

  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    secondaryColor: {
      type: String,
      default: '#36CFC9'
    },
    accentColor: {
      type: String,
      default: '#722ED1'
    },

    children: {
      type: Array,
      default: () => []
    },
    // 布局配置
    columnLayout: {
      type: String,
      default: 'auto',
      validator: (value) => ['1', '2', '3', 'auto'].includes(value)
    },
    cardRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    cardShadow: {
      type: Boolean,
      default: true
    },
    showAdvantages: {
      type: Boolean,
      default: true
    },

    // 数据源配置 - 直接包含中文标签信息
    products: {
      type: Array,
      default: () => [
        {
          id: 1,
          name: '智联企业资源管理系统',
          description: '一体化企业管理平台，集成财务、采购、销售、人力资源等核心业务模块。',
          image: 'https://picsum.photos/seed/product1/600/400',
          tag: 'core',
          features: ['财务模块', '供应链', '人力资源', '数据分析'],
          url: '#'
        },
        {
          id: 2,
          name: '智联客户关系管理系统',
          description: '全渠道客户关系管理平台，帮助企业提升客户体验，优化销售流程。',
          image: 'https://picsum.photos/seed/product2/600/400',
          tag: 'core',
          features: ['销售管理', '客户服务', '营销自动化', '客户分析'],
          url: '#'
        },
        {
          id: 3,
          name: '智联商业智能平台',
          description: 'AI驱动的数据分析平台，提供实时洞察和预测分析，支持数据驱动决策。',
          image: 'https://picsum.photos/seed/product3/600/400',
          tag: 'innovation',
          features: ['数据可视化', '预测分析', '自助分析', 'AI洞察'],
          url: '#'
        }
      ]
    },

    // 产品优势配置 - 直接包含中文标题和描述
    advantages: {
      type: Array,
      default: () => [
        {
          icon: 'fa-code-fork',
          title: '高度可定制',
          description: '根据企业需求灵活配置，满足不同行业特性'
        },
        {
          icon: 'fa-mobile',
          title: '全平台支持',
          description: '无缝支持PC、移动端，随时随地办公'
        },
        {
          icon: 'fa-plug',
          title: '开放集成',
          description: '丰富的API接口，轻松集成第三方系统'
        },
        {
          icon: 'fa-shield',
          title: '安全可靠',
          description: '多重安全保障，确保企业数据安全'
        }
      ]
    },

    // 筛选标签
    activeTag: {
      type: String,
      default: ''
    },

    // 数据源配置
    dataSourceUrl: {
      type: String,
      default: ''
    },

    autoLoad: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      // 内部活跃标签，优先使用props传入的值
      currentActiveTag: this.activeTag,
      // 加载状态
      isLoading: false,
      // 原始数据备份
      originalProducts: [],
      // 本地产品数据副本
      localProducts: []
    }
  },

  computed: {
    // 筛选后的产品
    filteredProducts() {
      if (!this.currentActiveTag) {
        return this.localProducts;
      }
      return this.localProducts.filter(product => product.tag === this.currentActiveTag);
    },

    // 网格布局类名
    gridClass() {
      switch (this.columnLayout) {
        case '1':
          return 'grid grid-cols-1 gap-8';
        case '2':
          return 'grid grid-cols-1 md:grid-cols-2 gap-8';
        case '3':
          return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8';
        default: // auto
          return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8';
      }
    },

    // 卡片样式
    cardStyle() {
      return {
        borderRadius: `${this.cardRadius}px`,
        boxShadow: this.cardShadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' : 'none'
      };
    }
  },

  watch: {
    // 监听外部传入的activeTag变化
    activeTag(newVal) {
      this.currentActiveTag = newVal;
    },

    // 监听外部传入的products变化
    products: {
      handler(newVal) {
        this.originalProducts = [...newVal];
        this.localProducts = [...newVal];
      },
      deep: true,
      immediate: true
    },

    // 监听数据源URL变化
    dataSourceUrl: {
      handler(newUrl, oldUrl) {
        if (this.autoLoad && newUrl && newUrl !== oldUrl) {
          this.loadDataFromSource();
        }
      }
    },

    mounted() {
      // 保存原始产品数据
      this.originalProducts = [...this.products];
      this.localProducts = [...this.products];

      // 如果设置了自动加载且有数据源URL，加载数据
      if (this.autoLoad && this.dataSourceUrl) {
        this.loadDataFromSource();
      }
    },

    methods: {
      /**
       * 从API数据源加载数据
       */
      async loadDataFromSource() {
        if (!this.dataSourceUrl) {
          console.warn('数据源URL为空，无法加载数据');
          return;
        }

        this.isLoading = true;

        try {
          // 发送请求获取数据
          const response = await fetch(this.dataSourceUrl);

          if (!response.ok) {
            throw new Error(`HTTP错误! 状态码: ${response.status}`);
          }

          const data = await response.json();

          // 验证数据格式
          let validData;
          if (Array.isArray(data)) {
            validData = data;
          } else if (data.products && Array.isArray(data.products)) {
            validData = data.products;
          } else {
            throw new Error('数据格式不正确，需要包含产品数组');
          }

          // 更新本地数据副本
          this.localProducts = [...validData];
          this.originalProducts = [...validData];

          // 通知父组件更新props
          this.$emit('update:products', [...validData]);
          this.$emit('dataLoaded', validData);
        } catch (error) {
          console.error('从数据源加载数据失败:', error);
          this.$emit('dataLoadError', error);
        } finally {
          this.isLoading = false;
        }
      },

      /**
       * 获取产品标签的显示文本
       */
      getProductTagLabel(tag) {
        const tagMap = {
          'core': '核心产品',
          'innovation': '创新产品',
          'new': '新品上市',
          'hot': '热销产品'
        };
        return tagMap[tag] || tag;
      },

      /**
       * 获取产品标签的样式类
       */
      getProductTagClass(tag) {
        switch (tag) {
          case 'core':
            return 'bg-primary/10 text-primary';
          case 'innovation':
            return 'bg-accent/10 text-accent';
          case 'new':
            return 'bg-green-100 text-green-600';
          case 'hot':
            return 'bg-orange-100 text-orange-600';
          default:
            return 'bg-gray-100 text-gray-600';
        }
      },

      /**
       * 产品卡片点击事件
       */
      handleProductClick(product) {
        this.$emit('productClick', product);
      },

      /**
       * 查看详情点击事件
       */
      handleDetailClick(product, e) {
        e.stopPropagation();
        this.$emit('detailClick', product);

        // 如果配置了链接且不是#，可以自动跳转
        if (product.url && product.url !== '#') {
          window.open(product.url, '_blank');
        }
      },

      /**
       * 按标签筛选产品
       */
      filterByTag(tag) {
        this.currentActiveTag = tag;
        this.$emit('tagChange', tag);
      },

      /**
       * 刷新产品数据
       */
      refresh() {
        if (this.dataSourceUrl) {
          this.loadDataFromSource();
        } else {
          // 重置为原始数据
          this.localProducts = [...this.originalProducts];
          this.$emit('update:products', [...this.originalProducts]);
        }
      }
    }
  }
};
</script>

<style scoped>
/* 主题色变量 */
:root {
  --primary-color: #165DFF;
  --secondary-color: #36CFC9;
  --accent-color: #722ED1;
}

/* 主题色适配 */
.text-primary {
  color: var(--primary-color) !important;
}

.bg-primary\/10 {
  background-color: rgba(22, 93, 255, 0.1) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.bg-accent\/10 {
  background-color: rgba(114, 46, 209, 0.1) !important;
}

/* 基础样式 */
.section-padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  line-height: 1.6;
}

/* 卡片样式 */
.card-hover {
  transition: all 0.3s ease;
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 图片悬停效果 */
img {
  transition: transform 0.5s ease;
}

img:hover {
  transform: scale(1.05);
}

/* 产品优势卡片 */
.advantage-card {
  transition: all 0.3s ease;
}

.advantage-card:hover {
  transform: translateY(-3px);
}
</style>
